<template>
    <div>
        <navBar class="navBar"></navBar>
        <div class="content grid">
            <div class="box">
                <div class="boxContent center">
                    <el-upload ref="uploadRef" class="upload-demo" drag action="/dev-api/web/api/v1/upload/file"
                        multiple :data="uploadData" :on-success="uploadSuccess">
                        <el-button style="width: 100%;height: 100%;" icon="el-icon-upload"
                            @click.stop="showDialog = true"></el-button>
                    </el-upload>
                </div>
            </div>
            <div v-for="item in uploadList" class="videoBox" @click="gotoVideo(item)">
                <div class="box">
                    <div class="boxContent">
                        <video :src="item.videoAddress" class="video" preload="metadata" loop></video>
                    </div>
                </div>
                <div>{{ item.videoTitle }}</div>
            </div>
        </div>
        <el-dialog :visible.sync="showDialog">
            <el-form ref="form" :model="uploadData" label-width="80px" :rules="rules">
                <el-form-item label="视频标题" prop="videoName">
                    <el-input v-model="uploadData.videoName" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="视频分类" prop="videoClassificationId">
                    <el-select v-model="uploadData.videoClassificationId" placeholder="请选择">
                        <el-option v-for="(item, index) in videoTypeData" :key="index" :label="item" :value="index">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="视频描述" prop="resourceDescription">
                    <el-input type="textarea" autosize placeholder="请输入内容" v-model="uploadData.resourceDescription">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="primaryDialog">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import navBar from '@/components/navBar.vue';
import { record } from '@/api/video';
export default {
    components: {
        navBar
    },
    data() {
        return {
            userdata: undefined,
            videoTypeData: ['学习', '运动', '搞笑', '动画', '电影', '游戏', '音乐', '生活'],
            showDialog: false,
            uploadData: {
                userId: undefined,
                videoName: '',
                videoClassificationId: 0,
                resourceDescription: ''
            },
            uploadList: new Array(),
            rules: {
                videoName: [
                    { required: true, message: '请输入视频标题', trigger: 'blur' }
                ],
                videoClassificationId: [
                    { required: true, message: '请选择视频类型', trigger: 'blur' }
                ],
                resourceDescription: [
                    { required: true, message: '请输入视频描述', trigger: 'blur' }
                ]
            }
        }
    },
    mounted() {
        this.userdata = this.$store.getters.token
        this.uploadData.userId = this.userdata.userId
        this.getList()
    },
    methods: {
        getList() {
            const data = {
                userId: this.userdata.userId
            }
            record(data).then(res => {
                this.uploadList = res.data
            })
        },
        uploadSuccess() {
            this.getList()
        },
        primaryDialog() {
            this.$refs.uploadRef.$refs["upload-inner"].handleClick();
            this.showDialog = false
        },
        gotoVideo(value) {
            value.videoId = value.id
            value.videoName = value.videoTitle
            this.$store.commit('videoData/setVideoData', value)
            this.$router.push({ path: '/video' })
        }
    }
}
</script>

<style scoped>
.navBar {
    position: sticky;
    top: -178px;
    z-index: 1;
}

.content {
    width: 80%;
    min-width: 1100px;
    margin: auto;
    padding-top: 30px;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 20px;
    row-gap: 20px;
}

.videoBox {
    overflow: hidden;
    border-radius: 10px;
    background-color: rgba(125, 125, 125, 0.5);
}

.videoBox>div:last-child {
    padding: 0 10px;
}

.box {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.upload-demo,
.upload-demo::v-deep>.el-upload,
.upload-demo::v-deep>.el-upload>.el-upload-dragger {
    width: 100%;
    height: 100%;
}

.upload-demo {
    position: relative;
}

.upload-demo::v-deep>.el-upload-list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.boxContent {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    line-height: 200px;
    font-size: 24px;
    color: black;
    background-color: gray;
}

.el-select {
    width: 100%;
}

.video {
    height: 100%;
    width: 100%;
}
</style>